<template>
  <div>
    <el-table :data="devBrow" style="width: 80%" class="table-box">
      <el-table-column prop="name" label="浏览器下载" width="1000">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a target="_blank" :href="scope.row.href" style="color: red">下载</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 第二表格 -->
    <el-table :data="devTools" style="width: 80%" class="table-box">
      <el-table-column prop="name" label="开发工具下载" width="920">
      </el-table-column>

      <el-table-column label="提取码" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a target="_blank" :href="scope.row.href" style="color: red">下载</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 第三表格 -->
    <el-table :data="manual" style="width: 80%" class="table-box">
      <el-table-column prop="name" label="手册下载" width="920">
      </el-table-column>

      <el-table-column label="提取码" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <a target="_blank" :href="scope.row.flag?path+'china.js':scope.row.href"  style="color: red" :download="scope.row.flag?'china.js':''">下载</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
       path: process.env.BASE_URL,
      devBrow: [
        {
          name:
            "2345浏览器(开发版) 支持系统：WinXP/Vista/Win7/Win8/Win8.1/Win10位数：32/64",
          href: "https://ie.2345.cc/",
        },
        {
          name: "谷歌浏览器 支持系统：Win7/Win8/Win8.1/Win10 位数：32/64",
          href: "https://www.google.cn/intl/zh-CN/chrome/",
        },
        {
          name:
            "火狐浏览器 标准版 支持系统：Win7/Win8/Win8.1/Win10 位数：32/64",
          href: "http://www.firefox.com.cn/",
        },
        {
          name:
            "Safari浏览器 支持系统：WinXP/Vista/Win7/Win8/Win8.1/Win10位数：32/64",
          href: "https://www.apple.com.cn/safari/",
        },
        {
          name: "Opera浏览器 支持系统：Vista/Win7/Win8/Win8.1/Win10 位数：64",
          href: "https://www.opera.com/zh-cn",
        },
      ],
      devTools: [
        {
          name: "VS code 支持系统：WinAll 位数：32/64",
          href: "https://code.visualstudio.com/Download",
          code: "",
        },
        {
          name: "HBulider X 支持系统：WinAll 位数：32/64",
          href: "https://www.dcloud.io/hbuilderx.html",
          code: "",
        },
        {
          name: "Node.js 支持系统：Windows/macos 位数：32/64",
          href: "https://nodejs.org/zh-cn/download/",
          code: "",
        },
        {
          name: "Dreamweaver_CS6_v2绿色破解版 支持系统：WinAll 位数：32/64",
          href: "https://pan.baidu.com/s/17n_kzB6S9f9JV0vEOoYGpg",
          code: "wqt5",
        },
        {
          name: "Dreamweaver_CS6_v8.0绿色版 支持系统：WinAll",
          href: "https://pan.baidu.com/s/1rd0DHC3-1ogPmvS4UBrrsg",
          code: "6uyj",
        },
        {
          name: "Sublime Tex3 支持系统：WinAll 位数：32/64",
          href: "https://pan.baidu.com/s/1lPA_cOb8vhSPmuQh2Y4pOg",
          code: "8g3c",
        },

        {
          name: "Photoshop_CS6绿色破解版 支持系统：WinAll 位数：32/64",
          href: "https://pan.baidu.com/s/16PtKzv7DKMC4KAtsgTki8A",
          code: "x231",
        },
        {
          name: "picpick图像编辑器绿色中文版 ",
          href: "https://pan.baidu.com/s/1CwimTfglWw8xaqHsfEez1Q",
          code: "byji",
        },
        {
          name: "CMS标签生成器 ",
          href: "https://pan.baidu.com/s/1LdtfhG_4lQObHpbvkSKwlw",
          code: "5apt",
        },
      ],
      manual: [
        {
          name: "HTML5中文手册",
          href: "https://pan.baidu.com/s/1Lb0q7j8i_ExTjxdo9Cf8og",
          code: "j295",
        },
        {
          name: "CSS 2.0中文手册",
          href: "https://pan.baidu.com/s/15AmmCh5HPzzy8kNYoPshrA",
          code: "hqgn",
        },
        {
          name: "CSS 3.0中文手册",
          href: "https://pan.baidu.com/s/1Y3jkr2aTwLRRAuaKumP77Q",
          code: "czuq",
        },
        {
          name: "Javascript中文手册",
          href: "https://pan.baidu.com/s/1KAjy7z-7zg5JeWNtHOr3Iw",
          code: "8ith",
        },
        {
          name: "jQuery 1.7 中文手册 ",
          href: "https://pan.baidu.com/s/1rIc6oq1fuFPbnQkzTlJxcg",
          code: "qmi7",
        },
        {
          name: "jQuery_3.3.1中文手册",
          href: "https://pan.baidu.com/s/1oQAqPqzAB0Gr5J_EKU3caQ",
          code: "td3w",
        },
        {
          name: "MySQL中文手册",
          href: "https://pan.baidu.com/s/1CZLClg_6eGy4Xeq-X0MmRQ",
          code: "5hse",
        },
        {
          name: "PHP中文手册",
          href: "https://pan.baidu.com/s/1evPBv0ErGdzr4cSRhXKt2g",
          code: "xviy",
        },
        {
          name: "china.js",
          href: "https://pan.baidu.com/s/1evPBv0ErGdzr4cSRhXKt2g",
          flag:true,
          url:'./china.js'
        },
      ],
    };
  },
  name: "Tools",
  components: {},
  methods: {},
};
</script>

<style>
.table-box {
  margin: 20px auto;
}

.table-header {
  background-color: #ccc;
}
</style>